
.full-screen {
  width: 100vw;
  height: 100vh;
  background-color: #040e2a;
  //background-image: linear-gradient(-180deg, #030b22 0%, #030b22 0%, #02174c 22%, #031030 42%, #030e2b 50%, #030e2b 100%);
}

// head
.screen-head {
  width: 100vw;
  height: 8.5vh;
  background-color: #01258d;
  background-image:
          url('../../../src/images/header-dot-left.svg'),
          url('../../../src/images/header-dot-left.svg'),
          url('../../../src/images/header-dot-left.svg'),
          url('../../../src/images/header-dot-right.svg'),
          url('../../../src/images/header-dot-right.svg'),
          url('../../../src/images/header-dot-right.svg'),
          url('../../../src/images/header-border.svg'),
          url('../../../src/images/header-back.svg'),
          url('../../../src/images/header-left.svg'),
          url('../../../src/images/header-right.svg'),
          url('../../../src/images/header-middle.svg');
  background-size:
          auto 0.9vh,
          auto 0.9vh,
          auto 0.9vh,
          auto 0.9vh,
          auto 0.9vh,
          auto 0.9vh,
          45.6vw 7.5vh,
          45vw 6.6vh,
          27.4vw 8.3vh,
          27.4vw 8.3vh,
          31.7vw 0.9vh;
  background-position:
          32.3vw 6.7vh,
          30.9vw 6.7vh,
          29.5vw 6.7vh,
          66.2vw 6.7vh,
          67.6vw 6.7vh,
          69vw 6.7vh,
          27.2vw 0.65vh,
          27.5vw 1.2vh,
          0 0,
          72.6vw 0,
          34.2vw 7.6vh;
  background-repeat: no-repeat;
}

.screen-head-title {
  height: 8vh;
  line-height: 8vh;
  font-size: 3vh;
  color: #ffcc00;
  font-weight: bold;
  display: flex;
  justify-content: center;
}

.screen-head-text {
  color: #ffcc00;
  position: absolute;
  top: 2.5vh;
  left: 2vw;
}

.screen-head-time {
  font-size: 3vh;
}

.screen-head-date {
  font-size: 1.5vh;
}

.screen-head-divider {
  margin: 0 0.5vw;
  width: 2px;
  background-color: whitesmoke;
}

//head run time
.screen-head-running {
  color: #FEC718;
  position: absolute;
  top: 2.8vh;
  right: 1vw;
  height: 3.5vh;
}

.screen-head-running-title {
  font-size: 1.8vh;
}

.screen-head-running-text {
  font-size: 2.2vh;
  font-weight: bold;
}

// card
.card-body {
  width: 100%;
  height: 100%;
  border: 1px #202d56 solid;
  background-color: rgba(0, 0, 0, 0.7);
}

.corner-com {
  position: relative;
  overflow: hidden;
  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border-top: 2px solid #00c7d6;
    border-left: 2px solid #00c7d6;
    &:first-of-type {
      top: 0;
      left: 0;
    }
    &:nth-of-type(2) {
      top: 0;
      right: 0;
      transform: rotate(90deg);
    }
    &:nth-of-type(3) {
      bottom: 0;
      left: 0;
      transform: rotate(-90deg);
    }
    &:nth-of-type(4) {
      bottom: 0;
      right: 0;
      transform: rotate(-180deg);
    }
  }
}

// card-title
.title-warp {
  width: 100%;
  height: 3vh;
  line-height: 3vh;
  padding-left: 0.5vw;
  display: flex;
}

.title-text {
  height: 3vh;
  line-height: 3vh;
  color: #14e6ff;
  padding-left: 0.5vw;
  font-size: 1.8vh;
  font-weight: bold;
}

.title-tail {
  height: 3vh;
  margin-left: 0.5vw;
  background-image:
          url('../../../src/images/header-dot-left.svg'),
          url('../../../src/images/header-dot-left.svg'),
          url('../../../src/images/header-dot-left.svg'),
          url('../../../src/images/header-dot-left.svg'),
          url('../../../src/images/title-line.svg');
  background-size:
          auto 0.9vh,
          auto 0.9vh,
          auto 0.9vh,
          auto 0.9vh,
          auto 0.2vh;
  background-position:
          0 1.3vh,
          1.2vw 1.3vh,
          2.4vw 1.3vh,
          3.6vw 1.3vh,
          4.5vw 2.1vh;
  background-repeat: no-repeat;
}

// number card
.num-card-warp {
  width: 5vw;
  height: 15vh;
  padding-top: 3.3vh;
  background-image:
          url('../../../src/images/num-card-body.svg'),
          url('../../../src/images/num-card-border.svg'),
          url('../../../src/images/num-card-diamond.svg'),
          url('../../../src/images/num-card-diamond.svg');
  background-size:
          100% 11vh,
          70% 3.5vh,
          100% 3.5vh,
          100% 3.5vh;
  background-position:
          0 1.1vh,
          0.8vw 3vh,
          0 8.5vh,
          0 9.5vh;
  background-repeat: no-repeat;
}
.num-card-text {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #09ffd7;
  font-size: 2vh;
  font-weight: bold;
}
.num-card-title {
  margin-top: 2.4vh;
  width: 100%;
  display: flex;
  justify-content: center;
  color: #09ffd7;
  font-size: 1.15vh;
  font-weight: bold;
}

// overview card
.over-card-warp {
  width: 10vw;
  height: 10.5vh;
  background-image:
          url('../../../src/images/over-card-border.svg'),
          url('../../../src/images/over-card-line.svg');
  background-size:
          105% 11vh,
          100% 0.1vh;
  background-position:
          0 1.1vh,
          0 8vh;
  background-repeat: no-repeat;
}
.over-card-text {
  width: 100%;
  height: 4vh;
  margin-top: 2vh;
  color: #ffcc00;
  font-size: 3.8vh;
  font-weight: bold;
  display: flex;
  justify-content: center;
}
.over-card-percent {
  font-size: 2.4vh;
  margin-top: 1.4vh;
}
.over-card-title {
  color: #00e3f5;
  display: flex;
  justify-content: center;
  font-size: 1.4vh;
  font-weight: bold;
  margin-top: 2.4vh;
}

// type card
.type-card {
  width: 3vw;
  height: 2vh;
  line-height: 2vh;
  font-size: 1.4vh;
  color: #020f32;
  background-color: rgba(0, 121, 254, 0.3);
  margin-right: 0.5vw;
  display: flex;
  justify-content: center;
}

.type-card-selected {
  background-color: #0079fe;
}

// percent
.top-title {
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-body {
  width: 100%;
  height: 1.8vh;
  border-radius: 5px;
  //background-color: #243b65;
  //box-sizing: border-box;
  //box-shadow: inset 0 1px 5px 0 rgba(0, 0, 0, 0.35);
}

.progress-done {
  position: absolute;
  height: 1.8vh;
  max-width: 100%;
  //border-radius: 5px;
  //background-image: linear-gradient(-90deg, #fc378a 0%, #fc378a 0%, #3296ef 100%, #3296ef 100%);
  background-color: #0079fe;
  box-sizing: border-box;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.35);
}

.percent-text {
  color: white;
  font-size: 1.3vh;
  font-weight: bold;
  padding-left: 0.5vw;
  position: absolute;
  left: 100%;
}

.percent-divider {
  border-left: 1px #2be7fe solid;
  margin-left: 0.5vw;
}

// map
.map-warp {
  height: 91.5vh;
  overflow: hidden;
}

.chinaMap{
  height: 94vh;
  flex:1;
}

.suspended-layer-left {
  position: fixed;
  width: 35vw;
  height: 91.5vh;
  top: 8.5vh;
  left: 0;
  z-index: 1000;
}

.suspended-layer-right {
  position: fixed;
  width: 35vw;
  height: 91.5vh;
  top: 8.5vh;
  right: 0;
  z-index: 1000;
}

.alert-dot {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgba(255, 255, 0, 1);
  animation: animations 1.3s infinite;
}
@keyframes animations {
  0% {
    width: 18px;
    height: 18px;
    background-color: rgba(255, 255, 0, 0.9);
  }
  10% {
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 0, 0.8);
  }
  20% {
    width: 22px;
    height: 22px;
    background-color: rgba(255, 255, 0, 0.7);
  }
  30% {
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 0, 0.6);
  }
  40% {
    width: 26px;
    height: 26px;
    background-color: rgba(255, 255, 0, 0.5);
  }
  50% {
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 0, 0.4);
  }
  60% {
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 0, 0.3);
  }
  70% {
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 0, 0.2);
  }
  80% {
    width: 34px;
    height: 34px;
    background-color: rgba(255, 255, 0, 0.2);
  }
  90% {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 0, 0.05);
  }
  100% {
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 0, 0.01);
  }
}

.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  padding: 0;

  background-image: url('../../../src/images/map-card-bg.svg');
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}

.content-window-card p {
  height: 2rem;
}


div.info-middle {
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
}


.info-middle img {
  float: left;
  margin-right: 6px;
}

// text
.overview-title {
  color: #0bdaf7;
  font-size: 1.3vh;
  margin-top: 0.8vh;
}
.overview-num {
  color: #ffcc00;
  font-size: 2.6vh;
  font-weight: bold;
  margin-left: 0.2vw;
}
.overview-unit {
  color: #ffcc00;
  font-size: 1.6vh;
  margin-right: 1vw;
  margin-top: 0.6vh;
}

.usage-text {
  color: #0bdaf7;
  font-size: 1.7vh;
  font-weight: bold;
}
.usage-title {
  color: #0bdaf7;
  font-size: 1.2vh;
  margin-top: 0.5vh;
  margin-left: 0.2vw;
  margin-right: 0.2vw;
}
.usage-title-dot {
  width: 0.7vh;
  height: 0.7vh;
  background-color: #14e6ff;
  margin-top: 1.1vh;
}
.usage-sub-line {
  width: 14vw;
  margin-left: 0.5vw;
  height: 1px;
  background-color: rgba(20, 230, 255, 0.15);
}
.usage-sub-title {
  color: #0bdaf7;
  font-size: 1.3vh;
}
.usage-border-left {
  border-left: 1px #14e6ff solid;
}

.warning-text {
  margin-left: 0.5vw;
  font-size: 1.5vh;
  color: #ffcc00;
}

.warning-sub-text {
  color: #ffcc00;
  font-size: 2.6vh;
  font-weight: bold;
}

.area-sub-title {
  color: #89d2fa;
  font-size: 1.7vh;
  margin-top: 1vh;
}

.resource-text {
  font-size: 1.4vh;
  margin-bottom: 1vh;
}


// ant reset
.ant-progress-circle .ant-progress-text {
  color: white !important;
  font-size: 1.8vh !important;
}

.ant-progress-inner {
  width: 7vh !important;
  height: 7vh !important;
}


